// eslint-diable-next-line
// const productionGzipExtensions = /\.(js/css/json/txt/html/ico/svg)(\?.*)?$/i
const productionGzipExtensions = /\.(js|css|html|svg)$/i;
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');

const webpack = require('webpack');
// eslint-disable-next-line no-unused-vars
const path = require('path');
console.log('process.env.ENV:', process.env.ENV);
module.exports = {
    /*
        // 详细：https://cli.vuejs.org/zh/config/#publicpath
        相对 publicPath 的限制
        相对路径的 publicPath 有一些使用上的限制。在以下情况下，应当避免使用相对 publicPath:
            当使用基于 HTML5 history.pushState 的路由时；
            当使用 pages 选项构建多页面应用时。
    */
    publicPath: './', // 跟域上下文目录
    outputDir: process.env.ENV === 'qa' ? 'qa' : 'rd', // 构建输出目录
    assetsDir: 'assets', // 静态资源目录（js, css, img, fonts）
    lintOnSave: true, // 是否开启eslint保存检测，有效值 true | false | 'error'
    runtimeCompiler: true, // 运行时版本是否需要编译
    transpileDependencies: [], // 默认babel-loader忽略node_modules, 这里可增加例外的包依赖包名
    productionSourceMap: false,
    pages: {
        index: {
            // page 的入口
            entry: 'src/index/main.js',
            // 模板来源
            template: 'public/index.html',
            // 在 dist/index.html 的输出
            filename: 'index.html',
            // 当使用 title 选项时，
            // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: '我还是从前那个少年',
            // 在这个页面中包含的块，默认情况下会包含
            // 提取出来的通用 chunk 和 vendor chunk。
            chunks: ['echarts', 'moment', 'element-ui', 'xlsx', 'chunk-vendors', 'chunk-common', 'index']
        }
        // 当使用只有入口的字符串格式时，
        // 模板会被推导为 `public/menu.html`
        // 并且如果找不到的话，就回退到 `public/index.html`。
        // 输出文件名会被推导为 `menu.html`。
        // menu: 'src/menu/main.js'
    },
    configureWebpack: config => {
        config.plugins.push(
            ...[
                new LodashModuleReplacementPlugin(),
                // 链接：https://juejin.cn/post/6844904105555525640
                new webpack.ContextReplacementPlugin(
                    /moment[/\\]locale$/, // 这个参数表明了我们要改变的打包上下文
                    /zh-cn/ // 这个参数表示我们只想打包这个正则匹配的文件
                )
            ]
        );
        // https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            // config.output.filename = 'assets/js/[name].[contenthash:8].min.js';
            // config.output.chunkFilename
            //     = 'assets/js/[name].[contenthash:8].min.js';
            config.plugins.push(
                ...[
                    new CompressionWebpackPlugin({
                        filename: '[path].gz[query]',
                        algorithm: 'gzip',
                        test: productionGzipExtensions,
                        threshold: 2048,
                        minRatio: 0.8
                    })
                ]
            );
        } else {
            // 为开发环境修改配置...
            config.devtool = 'cheap-module-eval-source-map';
        }
    },
    // eslint-disable-next-line no-unused-vars
    chainWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin);
            config.plugin('webpack-report').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [
                {
                    analyzerMode: 'static'
                }
            ]);

            config.optimization.splitChunks({
                chunks: 'async',
                minSize: 1024 * 10, // 30000,
                maxSize: 0,
                minChunks: 1,
                maxAsyncRequests: 6,
                maxInitialRequests: 4,
                automaticNameDelimiter: '~',
                cacheGroups: {
                    // 链接：https://juejin.cn/post/6844904105555525640
                    echarts: {
                        name: 'echarts',
                        test: /[\\/]node_modules[\\/]echarts[\\/]/,
                        minSize: 0,
                        minChunks: 1,
                        reuseExistingChunk: true,
                        chunks: 'all'
                    },
                    moment: {
                        name: 'moment',
                        test: /[\\/]node_modules[\\/]moment[\\/]/,
                        minSize: 0,
                        minChunks: 1,
                        reuseExistingChunk: true,
                        chunks: 'all'
                    },
                    'element-ui': {
                        name: 'element-ui',
                        test: /[\\/]node_modules[\\/]element-ui[\\/]/,
                        minSize: 0,
                        minChunks: 1,
                        reuseExistingChunk: true,
                        chunks: 'all'
                    },
                    xlsx: {
                        name: 'xlsx',
                        test: /[\\/]node_modules[\\/]xlsx[\\/]/,
                        minSize: 0,
                        minChunks: 1,
                        reuseExistingChunk: true,
                        chunks: 'all'
                    },

                    vendors: {
                        name: 'chunk-vendors',
                        test: /[\\/]node_modules[\\/]/,
                        priority: -10,
                        chunks: 'initial'
                    },
                    common: {
                        name: 'chunk-common',
                        minChunks: 2,
                        priority: -20,
                        chunks: 'initial',
                        reuseExistingChunk: true
                    }
                }
            });
            // config.optimization.splitChunks({
            //     chunks: 'async',
            //     minSize: 30000,
            //     maxSize: 0,
            //     minChunks: 1,
            //     maxAsyncRequests: 6,
            //     maxInitialRequests: 4,
            //     automaticNameDelimiter: '~',
            //     cacheGroups: {
            //         vendors: {
            //             name: 'chunk-vendors',
            //             test: /[\\/]node_modules[\\/]/,
            //             priority: -10,
            //             chunks: 'initial'
            //         },
            //         common: {
            //             name: 'chunk-common',
            //             minChunks: 2,
            //             priority: -20,
            //             chunks: 'initial',
            //             reuseExistingChunk: true
            //         }
            //     }
            // });
        }

        config.resolve.alias
            // set第一个参数：设置的别名，第二个参数：设置的路径
            .set('@', path.join(__dirname, './src/index'));

        // 在其内部，我们通过 file-loader 用版本哈希值和正确的公共基础路径来决定最终的文件路径，再用 url-loader 将小于 4kb 的资源内联，以减少 HTTP 请求的数量。
        // 你可以通过 chainWebpack 调整内联文件的大小限制。例如，下列代码会将其限制设置为 10kb：
        config.module
            .rule('images')
            .use('url-loader')
            .loader('url-loader')
            .tap(options => Object.assign(options, {limit: 10240}));
    },
    parallel: require('os').cpus().length > 1,
    // pluginsOptions: {
    //   // 第三方插件配置
    // },
    pwa: {
        // 单页插件相关配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    },
    css: {
        loaderOptions: {
            // eslint-disable-next-line max-len
            // https://cli.vuejs.org/zh/guide/css.html#%E5%90%91%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8-loader-%E4%BC%A0%E9%80%92%E9%80%89%E9%A1%B9
            // 给 sass-loader 传递选项
            sass: {
                // @/ 是 src/ 的别名
                // data: '@import "@/styles/variables.scss";'
            }
        }
    },
    devServer: {
        compress: true,
        disableHostCheck: true,
        open: true,
        host: '0.0.0.0',
        port: 8081,
        https: true,
        hotOnly: false,
        proxy: {
            // 配置跨域
            '/api': {
                // target: 'http://localhost:8090/',
                target: 'https://money.mrlishaohai.com/',
                ws: true,
                changeOrigin: true,
                logLevel: 'debug'
                // ,
                // pathRewrite: {
                //     '^/api': ''
                // }
            }
            // [process.env.VUE_APP_BASE_URL]: {
            //     target: process.env.VUE_APP_BASE_URL,
            //     ws: true,
            //     changeOrigin: true,
            //     pathRewrite: {
            //         [`^${process.env.VUE_APP_BASE_URL}`]: ''
            //     }
            // }
        }
    }
};
